windowPreview: Use a proper spacing between icon and title

Right now the spacing between icon and title works using a little trick
that doesn't really seem intended: The title is offset by
(icon-height * ICON_OVERLAP), when the icon is actually overlapping the
preview by ICON_OVERLAP, and *overflowing* the preview by
(1 - ICON_OVERLAP).

So correct that and offset the title by
(icon-height * (1 - ICON_OVERLAP)), and since now there's no spacing
anymore, add a proper ICON_TITLE_SPACING to that offset.

Also add the new ICON_TITLE_SPACING to the overlapHeight, where the
spacing was ignored so far.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1692>

diff --git a/js/ui/windowPreview.js b/js/ui/windowPreview.js
index 996d66bf551173715746551608fa239cd86ffeb8..f4a65b620e3c1d51aab75fb4231736b97fb5b34e 100644 (file)
--- a/js/ui/windowPreview.js
+++ b/js/ui/windowPreview.js
@@ -20,6 +20,8 @@ var DRAGGING_WINDOW_OPACITY = 100;
 const ICON_SIZE = 64;
 const ICON_OVERLAP = 0.7;
 
+const ICON_TITLE_SPACING = 6;
+
 var WindowPreviewLayout = GObject.registerClass({
     Properties: {
         'bounding-box': GObject.ParamSpec.boxed(
@@ -325,10 +327,11 @@ var WindowPreview = GObject.registerClass({
             source: this._windowContainer,
             coordinate: Clutter.BindCoordinate.X,
         }));
+        const iconBottomOverlap = ICON_SIZE * (1 - ICON_OVERLAP);
         this._title.add_constraint(new Clutter.BindConstraint({
             source: this._windowContainer,
             coordinate: Clutter.BindCoordinate.Y,
-            offset: scaleFactor * ICON_SIZE * ICON_OVERLAP,
+            offset: scaleFactor * (iconBottomOverlap + ICON_TITLE_SPACING),
         }));
         this._title.add_constraint(new Clutter.AlignConstraint({
             source: this._windowContainer,
@@ -338,7 +341,7 @@ var WindowPreview = GObject.registerClass({
         this._title.add_constraint(new Clutter.AlignConstraint({
             source: this._windowContainer,
             align_axis: Clutter.AlignAxis.Y_AXIS,
-            pivot_point: new Graphene.Point({ x: -1, y: ICON_OVERLAP }),
+            pivot_point: new Graphene.Point({ x: -1, y: 0 }),
             factor: 1,
         }));
         this._title.clutter_text.ellipsize = Pango.EllipsizeMode.END;
@@ -455,7 +458,7 @@ var WindowPreview = GObject.registerClass({
         const [, titleHeight] = this._title.get_preferred_height(-1);
 
         const topOverlap = 0;
-        const bottomOverlap = titleHeight;
+        const bottomOverlap = ICON_TITLE_SPACING + titleHeight;
 
         return [topOverlap, bottomOverlap];
     }